<template>
  <el-card >
    <div style="width:70%;margin:auto;">
        <el-form ref="pwdRef" :model="user" :rules="rules" label-width="100px" label-suffix=":">
          <el-form-item label="支付密码" prop="oldPassword">
            <el-input v-model="user.oldPassword" placeholder="请输入支付密码" type="password" :show-password="true" />
          </el-form-item>
          <el-form-item label="验证码" prop="newPassword">
            <el-input v-model="user.newPassword" type="number" placeholder="请输入验证码" >
              <template #append>
                <el-button @click="sendSmsCode" >{{sendTxt.txt}}</el-button>
                </template>
            </el-input>
          </el-form-item>
          <div style="width:30%;margin:auto;">
            <el-button type="primary" @click="submit" :loading="loading">保存</el-button>
            <el-button type="danger" @click="close">关闭</el-button>
          </div>
        </el-form>
    </div>
  </el-card>

</template>

<script  setup lang="ts">
import { sendPaySmsCode,resetPayPwd } from "@/api/system/user";
import type { ResetPwdForm } from "@/api/system/user/types";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const pwdRef = ref<ElFormInstance>();
const user = ref<ResetPwdForm>({
  oldPassword: "",
  newPassword: "",
  confirmPassword: ""
});

const loading = ref(false);

const sendTxt = ref({
    txt:"获取验证码",
    countdown:60,
    getSmsCodeStatus:false
});


const rules = ref({
  oldPassword: [{ required: true, message: "支付密码不能为空", trigger: "blur" }, {
    min: 6,
    max: 20,
    message: "长度在 6 到 20 个字符",
    trigger: "blur"
  }],
  newPassword: [{ required: true, message: "验证码不能为空", trigger: "blur" }]
});



const startCountdown = function() {

			let countdown = sendTxt.value.countdown;
        const intervalId = setInterval(() => {
          countdown--;
          sendTxt.value.countdown = countdown;
          sendTxt.value.txt = sendTxt.value.countdown+'秒后重新获取';
          if (countdown <= 0) {
            clearInterval(intervalId);
            sendTxt.value.countdown = 60;
            sendTxt.value.getSmsCodeStatus = false;
            sendTxt.value.txt ="获取验证码";
          }
        }, 1000);
      };


const sendSms = async()=>{
      // let protocol = window.location.protocol;
      // let hostname = window.location.hostname;
      // let port = window.location.port;
      // if(port){
      //     port = ":"+port;
      // }
      // let domain = protocol+"//"+hostname+port;
      let domain = location.origin;
      try{
        sendTxt.value.txt = sendTxt.value.countdown+'秒后重新获取';
        startCountdown();
         await sendPaySmsCode(domain);
         proxy?.$modal.msgSuccess("发送成功");

      }catch(e){
          sendTxt.value.getSmsCodeStatus = false;
      }
}


const sendSmsCode = ()=>{
    if(sendTxt.value.getSmsCodeStatus){
      return ;
    }
    sendTxt.value.getSmsCodeStatus = true;

    sendSms();

}

/** 提交按钮 */
const submit = () => {
  pwdRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      try {
        loading.value = true;
        await resetPayPwd(user.value.oldPassword, user.value.newPassword);
        loading.value  = false;
        proxy?.$modal.msgSuccess("修改成功");
      }catch(e){
         loading.value  = false;
      }

    }
  });
};
/** 关闭按钮 */
const close = () => {
  proxy?.$tab.closePage();
};

</script>

<style>


</style>
